<template>
	<el-dialog title="视频组件" :visible="pickVedio.status" width="672px" @close="handleCancel()" class="video-dialog">
		<el-form :model="curPickVedio" :rules="rules" ref="curPickVedio">
			<div class="text">视频通用代码：<router-link to="scenehelp" target="_blank">什么是通用代码</router-link></div>
			<el-form-item prop="src">
				<el-input type="textarea" v-model.trim="curPickVedio.src"></el-input>
			</el-form-item>
			<div class="text">将视频通用代码粘贴到文本框里即可</div>
			<div class="text">支持的视频：<a href="https://v.qq.com/" target="_blank">腾讯</a><a href="https://www.youku.com/" target="_blank">优酷</a></div>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button size="mini" @click="handleCancel()">取 消</el-button>
			<el-button size="mini" type="primary" @click="handleConfirm('curPickVedio')">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
	export default {
		name: 'PickVedio',
		data() {
			return {
				curPickVedio: {
					src: ""
				},
				rules: {
					src: [{
						required: true,
						pattern: /^\<iframe /g,
						message: '请输入正确的视频通用代码',
						trigger: 'blur'
					}]
				}
			}
		},
		computed: {
			pickVedio() {
				return this.$store.getters.pickVedio
			}
		},
		created() {
			this.curPickVedio.src=this.$store.getters.vedioUrl
		},
		methods: {
			handleCancel() {
					this.$store.commit('SET_VEDIO_URL',"")
				this.$store.commit('SET_PICK_VEDIO', false)
			},
			handleConfirm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.pickVedio && this.pickVedio.callback && this.pickVedio.callback(this.curPickVedio)
						this.handleCancel()
					} else {
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		}
	}
</script>
<style scoped>
	.text {
		text-align: left;
		margin: 0 0 10px;
	}

	a,
	a:hover,
	a:focus {
		color: #409eff;
		text-decoration: underline;
		font-size: 14px;
		margin-right: 5px;
	}
</style>
